﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>测试HTML5文件API</title>
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/filereader.js" type="text/javascript"></script>
</head>
<body>
    <h2>FileReader接口</h2>
    <div><b>5种不同的读取方法</b></div>
    <table border="1" cellpadding="1" cellspacing="1">
        <tr>
            <td>方法名</td>
            <td>参数</td>
            <td>描述</td>
        </tr>
        <tr>
            <td>abort</td>
            <td>none</td>
            <td>中断读取</td>
        </tr>
        <tr>
            <td>readAsArrayBuffer</td>
            <td>blob</td>
            <td>以ArrayBuffer格式返回文件内容</td>
        </tr>
        <tr>
            <td>readAsBinaryString</td>
            <td>blob</td>
            <td>将文件读取为二进制码</td>
        </tr>
        <tr>
            <td>readAsDataURL</td>
            <td>blob</td>
            <td>将文件读取为 DataURL</td>
        </tr>
        <tr>
            <td>readAsText</td>
            <td>file, [encoding]</td>
            <td>将文件读取为文本</td>
        </tr>
    </table>
    <div style="margin-top:20px"><b>FileReader事件</b></div>
    <table border="1" cellpadding="1" cellspacing="1">
        <tr>
            <td>事件</td>
            <td>描述</td>
        </tr>
        <tr>
            <td>onabort</td>
            <td>中断时触发</td>
        </tr>
        <tr>
            <td>onerror</td>
            <td>出错时触发</td>
        </tr>
        <tr>
            <td>onload</td>
            <td>文件读取成功完成时触发</td>
        </tr>
        <tr>
            <td>onloadend</td>
            <td>读取完成触发，无论成功或失败</td>
        </tr>
        <tr>
            <td>onloadstart</td>
            <td>读取开始时触发</td>
        </tr>
        <tr>
            <td>onprogress</td>
            <td>读取中</td>
        </tr>
    </table>
   <div style="margin:20px 5px;"><input type="file" id="imgfile1" /></div>
   <div id="imginfo"></div>
   <div>打开一个txt文件</div>
   <div><input type="file" id="txtfile1" /></div>
   <div id="txtcontent"></div>
</body>
</html>
